<template>
    <div class=''>
        子组件
        -----{{ val }}
        <!-- $en 全局变量 -->
        {{ $en }}
        <div v-for="item in arr"> {{ item }}</div>
        <a-button @click='btn'> 传值给父组件</a-button>
        <Suspense>
            <!-- 需要显示的 -->
            <template #default>
                <div>
                    <syncVue></syncVue>
                </div>
            </template>
            <!-- 没有加载完时候显示的· -->
            <template #fallback>
                <div>5555555555</div>
            </template>
        </Suspense>
    </div>
</template>

<script lang='ts' setup>
import { ref, defineAsyncComponent } from 'vue'
const refVal = ref('66')
// js写法
// defineProps({
//     val: {
//         type: String,
//         required: true,
//         default() {
//             return 6666
//         }
//     }
// })
// Ts写法
// defineProps<{ val: String }>()
// Ts写法
withDefaults(defineProps<{ arr?: string[], title?: string, val: String }>(), { arr: () => ['1111', '22222'], title: '444' })
// 传值给父组件
// const emit = defineEmits(['changeClick', 'updateClick'])

// ts 写法  传值给父组件
const emit = defineEmits<{
    (event: 'changeClick', val: string): void
    (event: 'updateClick', id: number): void
}>()
const btn = () => {

    emit('changeClick', '222211')
}
// 组件默认暴露出去方法
defineExpose<{ refVal: string }>({ refVal: '6666' })
// 异步组件注册
const syncVue = defineAsyncComponent(() => import('./suspenseCom.vue'))
</script>

<style scoped lang='less'></style>